

<template>
  <div>
    <div class="returnsetting-mokuai">
      <!-- 数据模块 -->
      <div class="returnsetting-index">
        <div class="returnsetting-index-top">
          <div class="returnsetting-name">
            <div class="returnsetting-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="returnsetting-index-select">
              <el-button @click="returnsettingButton">添加</el-button>
            </div>
          </div>
          <div class="returnsetting-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                :reserve-selection="true"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="cause" label="原因类型" align="center">
                  <template slot-scope="scope">{{ scope.row.cause}}</template>
                </el-table-column>
                <el-table-column prop="seq" label="排序" width="100" align="center">
                  <template slot-scope="scope">{{scope.row.seq}}</template>
                </el-table-column>
                <el-table-column prop="status" label="是否启用" width="200" align="center">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changSwitch($event,scope.row,scope.$index)"></el-switch>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="returnsettingButton1(scope.$index, scope.row)"
                      type="text"
                      size="small"
                    >编辑</el-button>
                    <el-button
                      type="text"
                      @click="handleClick(scope.$index, scope.row)"
                      size="small"
                      slot="reference"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="returnsetting-paging">
              <!-- 批量操作 -->
              <div class="returnsetting-paging-leftlayout">
                <div class="opertation-block">
                  <!-- 全选需要设置方法目前只能操作0，1数据 -->
                  <el-button @click="toggleSelection([tableData[0], tableData[1]])" size="small">全选</el-button>
                </div>
                <div class="opertation-block">
                  <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
                    <el-form-item label>
                      <el-select
                        v-model="operation.opertationType"
                        placeholder="批量操作"
                        class="select-width-2"
                      >
                        <el-option label="删除" value="0" :required="true"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="opertation-block">
                  <el-button size="small" @click="handleSelection">确定</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="returnsetting-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 高级检索 -->
    <div>
      <el-dialog title="添加退货原因" :visible.sync="dialogVisible" width="30%">
        <el-form :inline="false" :model="formInline" :ref="formQuery" class="demo-form-inline" :rules="rules">
          <el-form-item label="原因类型：" prop="cause">
            <el-input v-model="formInline.cause" placeholder></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="seq">
            <el-input v-model="formInline.seq" placeholder></el-input>
          </el-form-item>
          <el-form-item label="是否启用：">
            <template class="returnsetting-switch">
              <el-switch v-model="formInline.status" :active-value="1" :inactive-value="0"></el-switch>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm(formInline)">确认</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="编辑退货原因" :visible.sync="dialogVisible1" width="30%" >
        <el-form :inline="false" :model="formInline1" class="demo-form-inline" :rules="rulest">
          <el-form-item label="原因类型：" prop="cause">
            <el-input v-model="formInline1.cause" placeholder :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="*排序：" prop="sort">
            <el-input v-model="formInline1.seq" placeholder></el-input>
          </el-form-item>
          <el-form-item label="*是否启用：">
            <template class="returnsetting-switch">
              <el-switch v-model="formInline1.status" :active-value="1" :inactive-value="0"></el-switch>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm1(formInline1)">确认</el-button>
            <el-button @click="dialogVisible1 = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<style>
/* 自定义 */
.returnsetting-switch {
  float: left;
}
.select-width-1 {
  width: 200px;
}
.select-width-2 {
  width: 100px;
}
.returnsetting-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.returnsetting-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.returnsetting-index-top {
  margin-top: 30px;
}
.returnsetting-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.returnsetting-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}
.returnsetting-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.returnsetting-index-select {
  width: 80px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.returnsetting-content {
  width: 100%;
}
.returnsetting-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.returnsetting-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.returnsetting-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.returnsetting-paging-layout {
  float: right;
  margin-top: 7px;
}
</style>

<script>
import returnApi from "@/api/order/returnlist";
import request from "@/utils/request";
export default {
  //注入reload方法
  inject:['reload'],
  data() {
    return {

      //表单校验
      rules:{
        cause:[{required:true,message:'原因不能为空',trigger:'blur'}],
        seq:[{required:true,message:'排序不能为空',trigger:'blur'}],
        },

      rulest:{seq:[{required:true,message:'排序不能为空',trigger:'blur'}]},

      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage4: 1,
      seq:0,


      //   弹出框
      formInline: {
        id: "",
        cause: "",
        seq: "",
        status: "",
        value: true
      },

      formInline1: {
        id: this.id,
        cause: '',
        seq: this.seq,
        status: this.status,
        value: true
      },

      dialogVisible: false,
      dialogVisible1: false,

      operation: {
        opertationType: ""
      },
      // 列表数据
      tableData: [],

      tableData1: [
        {
          cause: "质量问题",
          sort: "1",
          value: true
        },
        {
          cause: "质量问题",
          sort: "1",
          value: true
        },
        {
          cause: "质量问题",
          sort: "1",
          value: true
        }
      ],
      //临时数组
      formInline:{},

      multipleSelection: []
      // 分页
    };
  },
  methods: {

    //关闭对话后刷新
    closeDialog(done) {
          done();
          location.reload();
    },

    returnsettingButton() {
      this.dialogVisible = true;
      // this.$$nextTick(()=>{
      //   this.$refs['formInline'].resetFields()
      // });
    },
    returnsettingButton1(index, row) {
      this.formInline1.id = row.id;
      this.formInline1.cause = row.cause;
      this.formInline1.seq = row.seq;
      this.formInline1.status = row.status;
      this.dialogVisible1 = true;
      // this.$$nextTick(()=>{
      //   this.$refs['formInline1'].resetFields()
      // });
    },

    //添加新增
    resetForm(formInline) {
      returnApi.adds(this.formInline).then(response => {
        const resp = response.data;
        console.log(response);
        if (resp.code == 200) {
          this.dialogVisible = false;
          this.isData(this.currentPage4, this.pageSize, this.seq);
        } else {
          this.$message({
            message: resp.message,
            type: "warning"
          });
        }
      });
      return false;
    },

    //编辑修改
    resetForm1(formInline1) {
      returnApi.updateEdit(this.formInline1).then(response => {
        const resp1 = response.data;
        console.log(response);
        if (resp1.code == 200) {
          this.dialogVisible1 = false;
          this.isData(this.currentPage4, this.pageSize, this.seq);
        } else {
          this.$message({
            message: resp1.message,
            type: "warning"
          });
        }
      });
      return false;
    },

    //删除
    handleClick(index, row) {
      var idx = row.id;
      this.$confirm("此操作将永久删除原因" + '<'+row.cause +'>'+ "是否继续？", "提示", {
        type: "warning"
      }).then(() => {
        returnApi.deleteCause(idx).then(response => {
          console.log("这是" + idx);
          const res = response.data;
          console.log(response);
          if (res.code == 200) {
            this.isData(this.currentPage4, this.pageSize, this.seq);
          } else {
            this.$message({
              message: res.message,
              type: "warning"
            });
          }
        });
      });
    },

    // 数据列表
    toggleSelection() {
      if (this.tableData) {
        // console.log(this.tableData);
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach(v=>{
        this.multipleSelection[this.multipleSelection.length]=v.id;
      });
    },

    //批量删除处理
    handleSelection(){
      console.log(this.multipleSelection);
      returnApi.deleteAllList(this.multipleSelection).then(response=>{
        const res = response.data;
        console.log(response);
        if(res.code==200){
         this.isData(this.currentPage4, this.pageSize, this.seq);
        }else{
          this.$message({
              message: res.message,
              type: "warning"
            });
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${this.pageSize} 条`);
      this.isData(this.currentPage4, this.pageSize, this.seq);
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${this.currentPage4}`);
      this.isData(this.currentPage4, this.pageSize, this.seq);
    },

    isData(pageNum, pageSize,seq) {
      returnApi.getPages(pageNum, pageSize,seq).then(response => {
        console.log(response);
        this.tableData = response.data.data.list;
        this.total = response.data.data.total;
      });
    }
  },
  mounted() {
    this.isData(this.currentPage4, this.pageSize,this.seq);
  }
};
</script>